<template>
	<view class="container"> 
		<view class="body">
			<view class="deposit-input-box" @click="chooseCause">
				<text>退款原因:</text>
				<text>{{label}}</text>
				<lb-picker ref="picker" @confirm="handleConfirm"  :list="selectData" @cancle="handleCancle">
					
				</lb-picker>
			</view>
			<view class="deposit-input-box">
				<text>退款描述:</text>
				<input class="deposit-input" v-model="describe"  placeholder=" 请简要描述退款原因"/>
			</view>
			<view class="deposit-btn" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import Api from '@/http/api.js';
    export default {
		components: {
		      LbPicker
		    },
		data(){
			return {
				selectData:[{label:"我不想要了",value:1},
                    {label:"颜色/尺寸/参数不符",value:2},
                    {label:"退运费",value:3},
					{label:"商品瑕疵",value:4},
					{label:"质量问题",value:5},
					{label:"少件/漏发",value:6},
					{label:"收到商品时有划痕或破损",value:7},
					{label:"假冒品牌",value:8},
					{label:"发票问题",value:9},
					],
				rec_id:0,
				order_id:0,
				goodsInfo:{},
				user:{},
				token:"",
				user_id:0,
				describe:'',
				label:'我不想要了',
				value:1
			}
		},
		
		onShow() {
			this.user=uni.getStorageSync("userInfo");
			if(!this.user){
				uni.navigateTo({
					url:"/pages/userinfo/getuserauth"
				})
			}
		},
		onLoad(options){
			uni.hideShareMenu()
			
			this.rec_id=options.rec_id
			this.order_id=options.order_id
		},
        methods: {
			chooseCause(){
				this.$refs.picker.show();
			},
			handleConfirm(e){
				this.label=e.item.label;
				var that = this
				setTimeout(function(){
					that.$refs.picker.hide();
				},100)
			},
			handleCancle(e){
				var that = this
				setTimeout(function(){
					that.$refs.picker.hide();
				},100)
			},
			//提交
			async submit(){
				let that=this
				if(!this.value){
					this.$api.msg('请选择退款原因');
					return;
				}
				if(!this.describe){
					this.$api.msg('请简述退款原因');
					return;
				}
				let res = await Api.apiCall('post', Api.weixin.returnGoods, {
					title:this.label,
					describe:this.describe,
					user_id:this.user.user_id,
					rec_id:this.rec_id,
				});
				if(res.data.code==200){
					
					this.$api.msg(res.message)
					setTimeout(function(){
						uni.navigateTo({
							url:'/pages/order/detail?order_id='+this.order_id
						})
					},2000)
				}else{
					this.$api.msg(res.message);
				}			
			},
        }  
    }  
</script>  

<style lang='scss'>
	.container{
		background: #F7F7F7;
		padding-top: 20upx;
		.body{
			background-color: #ffffff;
			.deposit-top{
				padding:40upx;
				font-size: 28upx;
				.deposit-data-btn{
					float: right;
					color: #ED1C24;
				}
			}
			.deposit-input-box{
				display: flex;
				font-size: 32upx;
				color: #333333;
				padding: 30upx;
				line-height: 80upx;
				border-bottom: 1upx solid #EBEBEB;
				.deposit-input{
					height: 80upx;
					margin-left: 30upx;
				}
			}
			.deposit-btn{
				height: 96upx;
				line-height: 96upx;
				border-radius: 96upx;
				background-color: #ED1C24;
				color: #ffffff;
				font-size: 32upx;
				text-align: center;
				margin: 40upx;
			}
		}
	}
</style>
